<template>
  <table class="table table-bordered text-center">
    <thead>
      <tr>
        <th>姓名</th>
        <th>电话</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in list" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{item.tel}}</td>
            <td><button class="btn btn-info" @click="edit(index)">编辑</button>
            <button class="btn btn-danger" @click="del(index)">删除</button></td>
        </tr>
    </tbody>
  </table>
</template>

<script>
export default {
    props:["list"],
    methods:{
      del(index){
         //通知父组件，删除一条数据,传递下标，告诉父组件删那一条
         this.$emit("dele",index)
      },
      edit(index){
        //通知父组件，显示编辑框
        this.$emit("edit",index)
      }
    }
    
};
</script>

<style>
</style>